<template>
  <div class="dynedAccountOperation">
    <el-card>
      <h2 v-if="pageType == 'create'">添加DYNED账号</h2>
      <h2 v-if="pageType == 'edit'">编辑DYNED账号</h2>
      <h2 v-if="pageType == 'details'">DYNED账号详情</h2>

      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="150px"
        v-if="formData.product"
      >
        <div class="form_wrap" v-if="formData.product !== 'dyned_pro'">
          <h4>基础信息</h4>
          <hr />
          <div class="form_content">
            <!-- <el-form-item
              label="合同编号"
              prop="contractNo"
              v-if="pageType != 'create'"
            >
              <el-input
                v-model="formData.contractNo"
                placeholder="请填写合同编号"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="学员编号" prop="user_id">
              <el-select
                v-model="formData.user_id"
                placeholder="请选择学员编号"
                @change="changeStudent"
                disabled
              >
                <el-option
                  v-for="item in stutendList"
                  :key="item.id"
                  :label="item.sno"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="学员姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请填写学员姓名"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="账号ID" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请填写账号ID"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item> -->
            <el-form-item label="学员邮箱" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请填写学员邮箱"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员手机号" prop="mobile">
              <el-input
                v-model="formData.mobile"
                placeholder="请填写学员手机号"
                maxlength="11"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开始日期" prop="start_date">
              <el-date-picker
                v-model="formData.start_date"
                type="date"
                placeholder="请选择开始日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="end_date">
              <el-date-picker
                v-model="formData.end_date"
                type="date"
                placeholder="请选择结束日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="初始级别" prop="initial_level">
              <el-select
                v-model="formData.initial_level"
                placeholder="请选择初始级别"
                @change="changeStartLevel"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目标级别" prop="target_level">
              <el-select
                v-model="formData.target_level"
                placeholder="请选择目标级别"
                @change="changeEndLevel"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="当前级别" prop="current_level">
              <el-select
                v-model="formData.current_level"
                placeholder="请选择当前级别"
                @change="changeMidLevel"
                disabled
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.label.code"
                  :label="item.label.name"
                  :value="item.label.code"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="上次级别" prop="previous_level" v-if="formData.product !== 'dyned_pro'">
                            <el-select v-model="formData.previous_level" placeholder="请选择上次级别">
                                <el-option
                                    v-for="item in levelList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
            <!-- <el-form-item
              label="修改密码"
              prop="password"
              v-if="pageType != 'create'"
            >
              <el-input
                v-model="formData.password"
                placeholder="请填写修改密码"
                style="width: 218px;"
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="专业dyned" prop="previous_level">
                            <div style="min-width: 218px;">
                                <el-radio v-model="formData.is_pro" label="1">是</el-radio>
                                <el-radio v-model="formData.is_pro" label="0">否</el-radio>
                            </div>
                        </el-form-item>
                        <el-form-item label="计费" prop="previous_level">
                            <div style="min-width: 218px;">
                                <el-radio v-model="formData.billable" label="1">是</el-radio>
                                <el-radio v-model="formData.billable" label="0">否</el-radio>
                            </div>
                        </el-form-item> -->
          </div>
        </div>
        <div class="form_wrap" v-if="formData.product === 'dyned_pro'">
          <h4>基础信息</h4>
          <hr />
          <div class="form_content">
            <el-form-item
              label="合同编号"
              prop="contractNo"
              v-if="pageType != 'create'"
            >
              <el-input
                v-model="formData.contractNo"
                placeholder="请填写合同编号"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员编号" prop="user_id">
              <el-select
                v-model="formData.user_id"
                placeholder="请选择学员编号"
                @change="changeStudent"
                disabled
              >
                <el-option
                  v-for="item in stutendList"
                  :key="item.id"
                  :label="item.sno"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学员姓名" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请填写学员姓名"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="账号ID" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请填写账号ID"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员邮箱" prop="user_email">
              <el-input
                v-model="formData.user_email"
                placeholder="请填写学员邮箱"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="学员手机号" prop="mobile">
              <el-input
                v-model="formData.mobile"
                placeholder="请填写学员手机号"
                maxlength="11"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开始日期" prop="start_date">
              <el-date-picker
                v-model="formData.start_date"
                type="date"
                placeholder="请选择开始日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="end_date">
              <el-date-picker
                v-model="formData.end_date"
                type="date"
                placeholder="请选择结束日期"
                disabled
              ></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="上次级别" prop="previous_level" v-if="formData.product !== 'dyned_pro'">
                            <el-select v-model="formData.previous_level" placeholder="请选择上次级别">
                                <el-option
                                    v-for="item in levelList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item label="青少年课程管理" prop="classroom">
              <el-select
                v-model="formData.classroom"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.url"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="修改密码"
              prop="password"
              v-if="pageType != 'create'"
            >
              <el-input
                v-model="formData.password"
                placeholder="请填写修改密码"
                style="width: 218px;"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="专业dyned" prop="previous_level">
                            <div style="min-width: 218px;">
                                <el-radio v-model="formData.is_pro" label="1">是</el-radio>
                                <el-radio v-model="formData.is_pro" label="0">否</el-radio>
                            </div>
                        </el-form-item>
                        <el-form-item label="计费" prop="previous_level">
                            <div style="min-width: 218px;">
                                <el-radio v-model="formData.billable" label="1">是</el-radio>
                                <el-radio v-model="formData.billable" label="0">否</el-radio>
                            </div>
                        </el-form-item> -->
          </div>
        </div>
      </el-form>
      <el-form label-width="90px">
        <el-form-item>
          <el-button @click="handleCancle">取消</el-button>
          <el-button type="primary" @click="handleSubmit('dynedAccountManage')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import http from "@/api/dyned";
import globalApi from "@/api/global";
import { formatDate, formatArray } from "@/utils";
import { changeTitleMinin, detailsMinin } from "@/mixin";
export default {
  name: "dynedAccountOperation",
  mixins: [changeTitleMinin, detailsMinin],
  data() {
    var checkData = (rules, value, callback) => {
      if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("不能包含汉字"));
        } else if (value.length < 3) {
          callback(new Error("密码不能小于3个字符"));
        } else {
          callback();
        }
      }
      callback();
    };
    return {
      startLevel: null,
      midLevel: null,
      endLevel: null,
      classList: [],
      http: http,
      levelList: [],
      stutendList: [],
      rules: {
        // name: [
        //     { required: true, message: '请填写姓名' }
        // ],
        // mobile: [
        //     { required: true, message: '请填写手机号' },
        //     { pattern: /^1[3-9]\d{9}$/, message: '手机号填写有误', trigger: 'blur' }
        // ],
        // email: [
        //     { required: true, message: '请填写邮箱' },
        //     { pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, message: '邮箱填写有误', trigger: 'blur' }
        // ],
        // classroom: [
        //     { required: true, message: '请选择课程' },
        // ],
        password: [
          { required: true, message: "请填写密码" },
          { validator: checkData, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    changeStartLevel(val) {
      console.log(val);
      for (let level of this.levelList) {
        if (val === level.label.code) {
          this.startLevel = Number(level.label.id);
          if (
            (this.midLevel && this.midLevel < this.startLevel) ||
            (this.endLevel && this.startLevel > this.endLevel)
          ) {
            console.log(this.midLevel < this.startLevel);
            this.$message.warning("请选择正确的当前级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeMidLevel(val) {
      for (let level of this.levelList) {
        if (val === level.label.code) {
          this.midLevel = Number(level.label.id);
          console.log(level.label.id);
          if (
            (this.endLevel && this.midLevel > this.endLevel) ||
            this.startLevel > this.midLevel
          ) {
            this.$message.warning("请选择正确的当前级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeEndLevel(val) {
      for (let level of this.levelList) {
        if (val === level.label.code) {
          this.endLevel = Number(level.label.id);
          if (
            this.endLevel < this.midLevel ||
            this.endLevel < this.startLevel
          ) {
            this.$message.warning("请选择正确的目标级别");
            this.isSubmit = false;
          } else {
            this.isSubmit = true;
          }
        }
      }
    },
    changeStudent(id) {
      if (this.stutendList.length) {
        for (let i = 0; i < this.stutendList.length; i++) {
          if (id == this.stutendList[i].id) {
            this.formData.name = this.stutendList[i].name;
          }
        }
      }
    },

    getStudent() {
      globalApi.getStudent().then(res => {
        this.stutendList = res.data;
      });
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      this.levelList = formatArray(basicConfig.user_level);
      this.getPageParams("dynedAccountOperationParams", () => {
        this.getStudent();
        if (this.pageParams.id) {
          let id = this.pageParams.id;
          http.getContentDetail({ id }).then(res => {
            let formData = res.data;
            if (this.checkKeysData.length) {
              this.checkKeysData.map(item => {
                if (formData[item]) {
                  formData[item] = formData[item].split(",");
                } else {
                  formData[item] = [];
                }
              });
            }
            if (formData["headimgurl"]) {
              this.imageUrl = formData["headimgurl"];
            }
            this.formData = formData;
          });
        }
      });
    }
  },
  created() {
    this.init();
  },
  mounted() {
    globalApi.getClassRoomList().then(res => {
      this.classList = res.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.dynedAccountOperation {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  h2 {
    margin-bottom: 10px;
  }
  .form_wrap {
    margin-bottom: 10px;
    h4 {
      margin: 10px 0px;
    }
    hr {
      margin-bottom: 10px;
    }
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
